<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:shiro="http://shiro.apache.org/tags"
                xmlns:sec="http://el.security.shiro/func"
                template="/WEB-INF/templates/default.xhtml">
    <ui:define name="content">

        <h:form id="_form">

            <p:panel id="menu_pnl" styleClass="index centered">
                <h:outputLabel id="welcome_lbl" style="float:left;" value="Welcome #{loggedUser.fullName} !"/>
                <shiro:hasRole name="superadmin"><h:outputLabel id="role_lbl" style="float:right;" value="All hail the hypnotoad !"/></shiro:hasRole>
                <shiro:hasRole name="admin"><h:outputLabel id="role_lbl" style="float:right;" value="You are admin"/></shiro:hasRole>

                <!-- users:* does not mean "any permisson on the users" it means "all the permissions on users" !
                     so we need to use "least common denominator" (ie view a user) permission that allows the user to go to the page
                     or definite a new permission for "you can go to that page" -->
                <h:panelGrid columns="1" styleClass="buttons centered">
                    <p:button value="Shipments" outcome="shipments"/>
                    <p:commandButton id="sampleDialog_btn" value="Sample dialog" action="#{index.openDialog}"
                                     update=":dialog_frm:sampleDialog_cnt" onsuccess="sampleDialog.show();"/>
                    <p:button id="userMgt_btn" value="User Management" outcome="users?faces-redirect=true"
                            rendered="#{sec:hasPermission('users_page')}"/>
                    <p:commandButton id="logout_btn" value="Logout" action="#{auth.logout}" ajax="false"/>
                </h:panelGrid>


                <p:blockUI block="menu_pnl" trigger="sampleDialog_btn">

                    <h:panelGrid columns="2">
                        <h:outputText value="Processing... (10 sec more or less)"/>
                        <p:graphicImage value="/resources/images/ajax-loader.gif"/>
                    </h:panelGrid>
                </p:blockUI>

            </p:panel>

        </h:form>

        <p:dialog id="sample_dlg" widgetVar="sampleDialog" width="800" height="300" header="Sample Dialog" resizable="false">
            <h:form id="dialog_frm">
                <p:outputPanel id="sampleDialog_cnt">
                    <h:outputText value="This is a sample panel"/>
                    <h:outputText value="Count : #{index.count}, elapsed : #{index.elapsed}"/>
                    <p:commandButton id="close_btn" value="Close" style="position:absolute;right:5px;bottom:5px;"
                                     action="#{index.closeDialog}" onsuccess="sampleDialog.hide();"/>
                </p:outputPanel>
            </h:form>
        </p:dialog>

    </ui:define>
</ui:composition>
